<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript " src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
请选择省:
<select name="" id="province" onchange="changeProvince()">

</select>
请选择市:
<select name="" id="city" onchange="changeCity()">

</select>
请选择区/县:
<select name="" id="district">

</select>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url:"../json/dataProvince.json",
            type:"get",
            dataType:"json",
            data:"",
            success:function (data) {
                var html='<option value="-1">--请选择省份--</option>';
                $.each(data,function (a,b) {
                    if (b.type == '1'){
                        html +='<option value="'+b.id+'">'+b.name+'</option>'
                    }
                });
                $("#province").append(html)
            },
            error:function () {
                alert("请求数据失败")
            }
        });
    });
    //选择省，填充市数据
    function changeProvince() {
        $("#city").empty();
         var id =$("#province option:selected").val()
        if(id != '-1'){
            $.ajax({
                url:"../json/dataProvince.json",
                type:"get",
                data:"",
                dataType:"json",
                success:function (data) {
                    var html = ' <option value="-1">--请选择市--</option>';
                    $.each(data,function (a,b) {
                        if (id == b.p_id){
                            html += '<option value="'+ b.id+'">'+b.name+'</option>'
                        }
                    })
                    $("#city").append(html)
                },
                error:function () {
                    alert("获取市级信息失败")
                }
            })
        }
    }
    //选择市，填充区数据
    function changeCity() {
        $("#district").empty();
        var id = $("#city option:selected").val()
        if(id != '-1'){
            $.ajax({
                url:"../json/dataProvince.json",
                type:"get",
                data:"",
                dataType:"json",
                success:function (data) {
                    var html = ' <option value="-1">--请选择区--</option>';
                    // alert(data)
                    $.each(data,function (a,b) {
                        if(id == b.p_id){
                            html += '<option value="'+ b.id+'">'+b.name+'</option>'
                        }
                    })
                    $("#district").append(html)
                },
                error:function () {
                    alert("请求失败")
                }
            });
        }
    }
</script>